<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .client-pagination {
            list-style: none;
        }

        .client-pagination>li {
            float: left;
            padding: 5px 10px;
            cursor: pointer;
        }

        .client-pagination .pageItem {
            border: solid thin #ddd;
            /* margin-left: 5px; */
        }

        .client-pagination .pageItem:hover {
            border: solid thin red;
            background-color: red;
            color: white;
        }

        .client-pagination .pageItemActive {
            border: solid thin red;
            /* margin-left: 10px; */
            background-color: red;
            color: white;
        }

        .client-pagination .pageItemDisable {
            border: solid thin #ddd;
            /* margin-left: 10px; */
            background-color: #ddd;
        }

        .client-pagination .pageItemDisable:first-child {
            /* margin-left: 0; */
        }
    </style>
</head>

<body>

    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        // 前端(客户端)分页 --> 一次性获取所有数据(少量),然后前端控制一下显示
        // http://www.jq22.com/jquery-info13734

        // 带页码跳转 http://www.jq22.com/jquery-info17447
        // 自渲染分页 http://www.jq22.com/jquery-info13810
        var clientPagination = {
            pageId: "",
            data: null,
            maxshowpageitem: 5, //最多显示的页码个数
            pagelistcount: 10, //每一页显示的内容条数
            callback: null, // 回到函数
            init: function (listCount, currentPage, options) {
                this.data = options.data;
                this.pageId = options.id;
                this.callBack = options.callBack || function () {};
                this.maxshowpageitem = options.maxshowpageitem; //最多显示的页码个数
                this.pagelistcount = options.pagelistcount; //每一页显示的内容条数
                clientPagination.initPage(listCount, currentPage);
            },
            /**
             * 初始化数据处理
             * @param listCount 列表总量
             * @param currentPage 当前页
             */
            initPage: function (listCount, currentPage) {
                var maxshowpageitem = clientPagination.maxshowpageitem;
                if (maxshowpageitem != null && maxshowpageitem > 0 && maxshowpageitem != "") {
                    clientPagination.maxshowpageitem = maxshowpageitem;
                }
                var pagelistcount = clientPagination.pagelistcount;
                if (pagelistcount != null && pagelistcount > 0 && pagelistcount != "") {
                    clientPagination.pagelistcount = pagelistcount;
                }
                clientPagination.pagelistcount = pagelistcount;
                if (listCount < 0) {
                    listCount = 0;
                }
                if (currentPage <= 0) {
                    currentPage = 1;
                }

                clientPagination.setPageListCount(listCount, currentPage);
            },
            /**
             * 初始化分页界面
             * @param listCount 列表总量
             */
            initWithUl: function (listCount, currentPage) {
                var pageCount = 1;
                if (listCount >= 0) {
                    var pageCount = listCount % clientPagination.pagelistcount > 0 ? parseInt(listCount /
                        clientPagination.pagelistcount) + 1 : parseInt(listCount / clientPagination
                        .pagelistcount);
                }
                var appendStr = clientPagination.getPageListModel(pageCount, currentPage);
                $("#" + clientPagination.pageId).html(appendStr);
            },
            /**
             * 设置列表总量和当前页码
             * @param listCount 列表总量
             * @param currentPage 当前页码
             */
            setPageListCount: function (listCount, currentPage) {
                listCount = parseInt(listCount);
                currentPage = parseInt(currentPage);
                clientPagination.initWithUl(listCount, currentPage);
                clientPagination.initPageEvent(listCount);
                clientPagination.viewPage(currentPage, listCount, clientPagination.pagelistcount,
                    clientPagination.data)
                //      fun(currentPage);
            },
            //页面显示功能
            viewPage: function (currentPage, listCount, pagelistcount, data) {
                var NUM = listCount % pagelistcount == 0 ? listCount / pagelistcount : parseInt(listCount /
                    pagelistcount) + 1;
                if (currentPage == NUM) {
                    var result = data.slice((currentPage - 1) * pagelistcount, data.length);
                } else {
                    var result = data.slice((currentPage - 1) * pagelistcount, (currentPage - 1) *
                        pagelistcount + pagelistcount);
                }
                this.callBack(result);
            },
            initPageEvent: function (listCount) {
                $("#" + clientPagination.pageId + ">li[class='pageItem']").on("click", function () {
                    clientPagination.setPageListCount(listCount, $(this).attr("page-data"),
                        clientPagination.fun);
                });
            },
            getPageListModel: function (pageCount, currentPage) {
                var prePage = currentPage - 1;
                var nextPage = currentPage + 1;
                var prePageClass = "pageItem";
                var nextPageClass = "pageItem";
                if (prePage <= 0) {
                    prePageClass = "pageItemDisable";
                }
                if (nextPage > pageCount) {
                    nextPageClass = "pageItemDisable";
                }
                var appendStr = "";
                appendStr += "<li class='" + prePageClass + "' page-data='1' page-rel='firstpage'>首页</li>";
                appendStr += "<li class='" + prePageClass + "' page-data='" + prePage +
                    "' page-rel='prepage'>上一页</li>";
                var miniPageNumber = 1;
                if (currentPage - parseInt(clientPagination.maxshowpageitem / 2) > 0 && currentPage + parseInt(
                        clientPagination.maxshowpageitem / 2) <= pageCount) {
                    miniPageNumber = currentPage - parseInt(clientPagination.maxshowpageitem / 2);
                } else if (currentPage - parseInt(clientPagination.maxshowpageitem / 2) > 0 && currentPage +
                    parseInt(clientPagination.maxshowpageitem / 2) > pageCount) {
                    miniPageNumber = pageCount - clientPagination.maxshowpageitem + 1;
                    if (miniPageNumber <= 0) {
                        miniPageNumber = 1;
                    }
                }
                var showPageNum = parseInt(clientPagination.maxshowpageitem);
                if (pageCount < showPageNum) {
                    showPageNum = pageCount;
                }
                for (var i = 0; i < showPageNum; i++) {
                    var pageNumber = miniPageNumber++;
                    var itemPageClass = "pageItem";
                    if (pageNumber == currentPage) {
                        itemPageClass = "pageItemActive";
                    }

                    appendStr += "<li class='" + itemPageClass + "' page-data='" + pageNumber +
                        "' page-rel='itempage'>" + pageNumber + "</li>";
                }
                appendStr += "<li class='" + nextPageClass + "' page-data='" + nextPage +
                    "' page-rel='nextpage'>下一页</li>";
                appendStr += "<li class='" + nextPageClass + "' page-data='" + pageCount +
                    "' page-rel='lastpage'>尾页</li>";
                return appendStr;

            }
        };
    </script>

    <div id="client_pagination" class="client-pagination"></div>
    <script>
        var data = [1,2,3,4,5,6,7,8,9,10,11,12,13]

        clientPagination.init(data.length, 1, {
            // 显示页码的元素
            id: "client_pagination", 
            // 显示数据
            data: data, 
            // 最多显示的页码个数
            maxshowpageitem: 5,
            // 每页显示数据个数 
            pagelistcount: 2, 

            // 回调处理
            callBack: function (result) {

            }
        });
    </script>
</body>

</html>